<template>
    <div>
        <a-form @keypress.enter="handleSearch">
            <flexbox align="flex-start">
                <flexbox class="cell-item" v-for="item of fieldList" :key="item.field">
                    <a-select allowClear :placeholder="item.placeholder" v-model:value="form[item.field]" v-if="item.formType === 'select'">
                        <a-select-option :key="item.code" v-for="item of item.setting">
                            {{ item.dimensionName }}
                        </a-select-option>
                    </a-select>
                    <h-dic-select :type="item.type || item.field" :title="item.title" v-model:value="form[item.field]" v-if="item.formType === 'dicSelect'" />
                    <HSuggestInput allowClear v-model:value="searchKeyword" placeholder="请输入需求名称" @change="handleInputSearch" v-if="item.formType === 'inputSearch'" />
                </flexbox>
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button class="margin-l-8" @click="handleReset">重置</a-button>
            </flexbox>
        </a-form>
    </div>
</template>

<script lang="ts">
import { useSearchHistory } from '@/hooks/common/useSearchHistory';
import { CloseCircleFilled } from '@ant-design/icons-vue';
import { HCustomSelect, HDicSelect, HRangePickerCell, HSuggestInput } from '@/components';
import { defineComponent, reactive, ref, unref, watch, toRefs } from 'vue';
export default defineComponent({
    components: {
        CloseCircleFilled,
        HDicSelect,
        HCustomSelect,
        HRangePickerCell,
        HSuggestInput
    },
    props: {
        system: Number
    },
    emits: ['search'],
    setup(props, { emit }) {
        const { saveHistory } = useSearchHistory();
        const state = reactive<any>({
            form: {
                requireType: null,
                level: null,
                status: null
            },
            searchKeyword: ''
        });
        const fieldList = ref<any>([
            { field: 'requireType', title: '需求类型', placeholder: '需求类型', formType: 'dicSelect' },
            { field: 'level', title: '优先级', placeholder: '优先级', formType: 'dicSelect' },
            { field: 'status', title: '状态', placeholder: '状态', formType: 'dicSelect' },
            { field: 'searchKeyword', title: '', placeholder: '请输入需求名称', formType: 'inputSearch' }
        ]);
        // 通用选择回调
        const handleReset = () => {
            state.form = {
                requireType: null,
                level: null,
                status: null
            };
        };
        const handleSearch = () => {
            emit('search', {
                ...state.form,
                requireName: state.searchKeyword
            });
        };
        const handleInputSearch = () => {
            if (state.searchKeyword) {
                saveHistory(state.searchKeyword);
            }
            handleSearch();
        };
        watch(
            () => props.system,
            () => {
                state.form.version = null;
            }
        );
        watch(
            state.form,
            () => {
                handleSearch();
            },
            { deep: true }
        );
        return {
            ...toRefs(state),
            fieldList,
            handleReset,
            handleSearch,
            handleInputSearch
        };
    }
});
</script>
<style scoped lang="less">
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
</style>